<template>
  <el-pagination
    class="pagination"
    background
    layout="prev, pager, next"
    :pager-count="5"
    :page-size="4"
    :current-page.sync="$store.state.page"
    :total.sync="total"
    @current-change="currentPage"
  >
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    total: Number,
  },

  //计算属性，会监听依赖属性值随之变化
  computed: {},

  //状态监听
  watch: {},

  //过滤器
  filters: {},

  //方法
  methods: {
    currentPage(e) {
      //console.log(e);
      this.$store.state.page = e;
    },
  },

  //组件
  components: {},

  //生命周期 - 实例完成
  created() {},

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.pagination {
  position: fixed;
  left: 50%;
  bottom: 2%;
}
::v-deep.pagination.el-pagination.is-background .btn-next,
::v-deep.pagination.el-pagination.is-background .btn-prev,
::v-deep.pagination.el-pagination.is-background .el-pager li {
  border-radius: 50%;
  height: 30px;
  line-height: 30px;
}
</style>
